<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
		<style>
			ul{
				display: flex;
			}
			 li{
				width: 50px;
				height: 50px;
				border-radius: 50%;
				background-color: aqua;
				text-align: center;
				line-height: 50px;
				list-style: none;
				margin: 0 10px;
			}
			
			/* enter进入,起始过程*/
			.list-enter-from{
				transform: translateY(100px);
				
				opacity: 0;
			}
				
			.list-enter-active, .list-leave-active{/*过程*/
				transition: all .5s;
				
			}
			.list-leave-to{/*离开的终点状态*/
				transform: scale(0);
				opacity: 0;/*透明*/
			}
			/*  过渡的时间，.list- 是组件move是模式，移动*/
			.list-move{
				transition: all .5s;
			
			}
		</style>
	</head>
	<body>
		<div id="app">
			<button @click="order(1)">升序</button>
			<button @click="order(2)">降序</button>
			<button @click="order(0)">乱序</button>
			<button @click="add(1)">添加到第一个</button>
			<button @click="add(2)">添加到末尾</button>
			<button @click="list.shift()">删除第一个</button>
			<button @click="list.pop()">删除最后一个</button>
			<button @click="list.splice(2,1)">删除第3个数字</button>
			<button @click="list.splice(list.length-3,1)">删除倒数第三个数字</button>
			<button @click="list.splice(1,4)">删除第2-5个数字</button>
			<button @click="list.splice(3,0,999)">添加到第3个后面</button>
			<button @click="list.splice(list.length - 1,0,999)">添加到倒数第2个</button>
			<!-- <ul>
				<li v-for="item in list">
					{{item}}
				</li>
			</ul> -->
			<!-- 过渡的组件 -->
			<transition-group name="list" tag="ul">
				<li v-for="(item,i) in list" :key="item" @dblclick="list.splice(i,1)">
					{{item}}
				</li>
			</transition-group>
		</div>

		<script>
			Vue.createApp({
				data(){
					return{
						list:[1,2,3,4,5,6,7,8]
					}
				},
				methods:{
					order(type){
						if(type == 1){
							//升序
							this.list.sort((a,b) => a-b)
						}else if(type == 2){
							//降序
							this.list.sort((a,b) => b-a)
						}else if(type == 0){
							//乱序
							this.list.sort(()=>Math.random() - 0.5)
						}
					},
					add(type){
						let i = this.list.length+1
						if(type == 1){
							//添加到最前面
							this.list.unshift(i)
						}else{
							this.list.push(i)
						}
					}
				}
			}).mount('#app')
		</script>
	</body>
</html>